<script setup lang="ts">

import {ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { ElInput, ElSelect, ElOption, ElCheckbox, ElButton } from 'element-plus'
import loginMode from "@/assets/login/login-mode.png";
import loginUser from "@/assets/login/login-user.png";
import loginPassword from "@/assets/login/login-password.png";
import IconDropDown from '@/components/IconDropDown.vue';
import {login} from "@/api/login.ts";
import { Md5 } from 'ts-md5'


const modeList = [
  { value: 0, label: '实验模式' },
  { value: 1, label: '比赛模式' },
]

const examMode = ref(0);
const username = ref('');
const password = ref('');
const rememberPassword = ref(false);

const handleLogin = () => {
  login({
    type: examMode.value,
    username: username.value,
    password: Md5.hashStr(Md5.hashStr(password.value)+"bby"),
  }).then((res) => {
    if (res.code === 200) {
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('type', examMode.value+'')
      // router.push('/base/home')
      // if(examMode.value===1){//43寸跳转
      //   router.push('/fortyThree/competitionInfo')
      // }else {
      //   router.push('/fortyThree/userInfo')
      // }
      if(examMode.value===1){ // 18寸跳转
        router.push('/eighteen/equipmentGame')
      }else {
        router.push('/eighteen/equipment')
      }
    }
  })
};

</script>

<template>
  <div class="login-all">
    <div class="login-left">
      <img src="@/assets/login/login-pic.png" alt="" srcset="">
    </div>
    <div class="login-right">
      <div class="login-form">
        <div class="title">
          <span>智慧实验室管控一体化平台</span>
          <i></i>
        </div>

        <!-- 考试模式选择 -->
        <el-select v-model="examMode" placeholder="请选择考试模式"
        :suffix-icon="IconDropDown"
        :teleported="false" class="border-style exam-mode">
          <template #prefix>
            <img :src="loginMode" alt="icon" class="custom-icon icon-style" />
          </template>
          <!-- <template #suffix>
            <img :src="loginArrow" alt="icon" class="custom-icon icon-style" />
          </template> -->
          <el-option v-for="item in modeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <!-- 用户名输入框 -->
        <el-input v-model="username" placeholder="请输入用户名" class="border-style input-field">
          <template #prefix>
            <img :src="loginUser" alt="icon" class="custom-icon icon-style" />
          </template>
        </el-input>

        <!-- 密码输入框 -->
        <el-input v-model="password" type="password" placeholder="请输入密码" show-password class="border-style input-field">
          <template #prefix>
            <img :src="loginPassword" alt="icon" class="custom-icon icon-style" />
          </template>
          <!-- <template #suffix>
            <img :src="eyeIcon" alt="icon" class="custom-icon eye-icon-style" />
          </template> -->
        </el-input>

        <!-- 记住密码 -->
        <el-checkbox v-model="rememberPassword" class="remember-password">记住密码</el-checkbox>

        <!-- 登录按钮 -->
        <el-button type="primary" @click="handleLogin" class="login-button">登录</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login-all {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;

  .login-left {
    img {
      width: 679px;
      height: 679px;
    }
  }

  .login-right {
    .login-form {
      width: 560px;
      height: 623px;
      background-image: url("@/assets/login/login-formbg.png");
      background-repeat: no-repeat;
      background-size: cover;
      padding: 48px 53px 73px 43px;
      box-sizing: border-box;

      .title {
        margin-bottom: 63px;
        text-align: left;
        width: 100%;

        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 36px;
          color: #FFFFFF;
          line-height: 50px;
          font-style: normal;
          padding-left: 22px;
        }

        i {
          display: block;
          margin-top: -13px;
          width: 246px;
          height: 8px;
          background: linear-gradient(270deg, rgba(0, 102, 255, 0) 0%, #00D1FF 100%);
        }
      }

      .border-style {
        width: 464px;
        height: 65px;
        background: rgba(5, 35, 72, 0.41);
        border-radius: 5px;
        border: 1px solid #00AAFE;

        /deep/ .el-input__wrapper,
        /deep/ .el-select__wrapper {
          background-color: transparent !important;
          height: 100%;
          width: 100%;
        }

        /deep/ .el-select__placeholder {
          color: #fff;
        }

        .icon-style {
          width: 43px;
          height: 43px;
        }
      }

      /* 使用深度选择器 */
      /deep/ .el-input__suffix .el-icon-arrow-up {
        display: none;
        /* 隐藏默认箭头 */
      }

      /deep/ .el-select .el-input__suffix {
        background: url('../assets/login/login-arrow.png') no-repeat center;
        background-size: contain;
        width: 20px;
        /* 根据你的图片大小调整 */
        height: 20px;
        /* 根据你的图片大小调整 */
        right: 10px;
        /* 调整位置 */
      }

      // .eye-icon-style {
      //   width: 26px;
      //   height: 20px;
      // }
      /deep/ .el-input__password {
        color: #00AAFE;
      }

      .exam-mode,
      .input-field {
        width: 100%;
        margin-bottom: 16px;
        color: #fff;
        font-size: 18px;

      }

      .remember-password {
        margin-bottom: 16px;
        color: #fff;
      }

      .login-button {
        width: 100%;
        height: 50px;
        border-radius: 25px;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}
:deep(.input-field .el-input__inner){
  font-size: 18px;
  color: #fff;
}
</style>